//2.预约人数对比--echarts
/*参数arr:
  var arr = [
    { name:'今日取消', value:36, key:'jrqx' },
    { name:'今日未办', value:65, key:'jryy' },
    { name:'今日完结', value:216, key:'jrwj' },
  ]
*/
var MD02 = {
  f1:12*KO,
  f2:16*KO,
  f3:12*KO,
  W:0,
  H:0,
  md:null,
  init:function(el,arr){
    if(el){
      this.W = el.offsetWidth;
      this.H = el.offsetHeight;
    }
    if(this.md){
      this.md.setOption({
        series:[{
          data: [
            {
              value: arr[0].value,
              itemStyle: {
                color: '#1F44FF'
              },
              name: arr[0].name
            }, 
            {
              value: arr[1].value,
              itemStyle: {
                color: "#FBED14"
              },
              name: arr[1].name
            }, 
            {
              value: arr[2].value,
              itemStyle: {
                color: "#3BF88F",
              },
              name: arr[2].name
            }]
        }]
      })
      return false;
    }else{
      this.myechart(el,data)
    }
  },
  myechart: function(el,data) {   
    var rich = {
      yellow: {
        color: "#ffc72b",
        fontSize: this.f1,
        padding: [0, 4],
        align: 'center',
        fontWeight:'bold'
      },
      total: {
        color: "#ffc72b",
        fontSize: this.f1,
        align: 'center'
      },
      white: {
        color: "#fff",
        align: 'center',
        fontSize: this.f1,
        padding: [5, 0],
        fontWeight:'bold'
      },
      blue: {
        color: '#49dff0',
        fontSize: this.f1,
        align: 'center'
      },
      hr: {
        borderColor: 'auto',
        width: '100%',
        borderWidth: 1,
        height: 0,
      }
    };
    var option = {
      tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#FFED27',
                fontSize:this.f1,
                color:'#001A53'
            }
        },
        textStyle:{
          fontSize:this.f2
        },
        formatter:'{b}：<span style="color:#FFED27;">{c}</span><br>比率：<span style="color:#49dff0">{d}%</span>',
        padding:[5*KO,10*KO]
      },
      series: [{
        type: 'pie',
        label: {
          fontSize: this.f3,
          normal: {
            color: "#fff",
            //formatter: '{b|{b}\n     {d}%}',
            formatter: function(params, ticket, callback) {
              var total = 0; //总数量
              var percent = 0; //占比
              arr.forEach(function(v, index) {
                total += v.value;
              });
              percent = ((params.value / total) * 100).toFixed(1);
              return '{white|' + params.name + '}\n\n{yellow|' + params.value + '}\n{blue|' + percent + '%}';
            },
            padding: [10*KO, -50*KO,0],
            rich: rich
          }
        },
        labelLine: {
          lineStyle: {
            width: 2*KO
          },
          length2: 50*KO
        },
        radius: ['0', '50%'],
        data: [{
          value: arr[0].value,
          itemStyle: {
            color: '#1F44FF'
            // color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{offset: 1,color: '#132B82'}, {offset: 0,color: '#1F44FF'}])
          },
          name: arr[0].name
        }, {
          value: arr[1].value,
          itemStyle: {
            color: "#FBED14"
            // color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{offset: 1,color: '#E6C146'}, {offset: 0,color: '#FBED14'}])
          },
          name: arr[1].name
        }, {
          value: arr[2].value,
          itemStyle: {
            color: "#3BF88F",
            // color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{offset: 1,color: '#46F0FF'}, {offset: 0,color: '#3BF88F'}])
          },
          name: arr[2].name
        }]
      }]
    };
    // 基于准备好的dom，初始化echarts实例
    this.md = echarts.init(el);
    // 使用刚指定的配置项和数据显示图表。
    this.md.setOption(option);
  }
}














